import React from 'react'
import { useMount } from 'utils'
import { useArray } from './utils'

export interface Person{
  name:string,
  age:number
}

export default function TryUserArray() {

  const persons:Person[] =[
    {name:'jack',age:25},
    {name:'ma',age:22}
  ]

  const {value, clear,removeIndex,add} = useArray(persons)

  useMount(()=>{
    
  })
  return (
    <div>
      {/* 点击以后增加 john */}
      <button onClick={()=>add({name:"john",age:22})}>add john</button>
      {/* 点击删除第一项 */}
      <button onClick={()=>removeIndex(0)}>remove 0</button>
      {/* 点击清空列表 */}
      <button style={{marginBottom:'50px'}} onClick={()=>clear()}>clear</button>
      {
        value.map((person:{name:string,age:number},index:number)=> (
          <div style={{marginBottom:"30px"}}>
            <span style={{color:"red"}}>{index}</span>
            <span>{person.name}</span>
            <span>{person.age}</span>
          </div>
        ))
      }
    </div>
  )
}
